<!--疾病预警-->

<template>
  <div class="body_2607026">
    <div style="display: flex; flex-wrap: wrap; gap: 10px;margin: 10px;" class="coverImg">
      <img class="pet_cover_imgs"
           v-for="(item, index) in petInfo"
           :key="index"
           :src="item.coverImg"
           @click="changeIndex(index)"/>
    </div>
    <div class="div">
      <!-- 顶部4个提示框 -->
      <div class="div_1">
        <div class="div_2">
          <div class="div_3">
            <div class="i">
              <img class="svg" src="../assets/img/temper.png"/>
            </div>
          </div>
          <div class="div_4">
            <span class="text">体温异常</span>
            <span class="text">{{ titleInfo.temperatureAbnormal }}</span>
          </div>
        </div>
        <div class="div_5">
          <div class="div_6">
            <div class="i_1">
              <img class="svg_1" src="../assets/img/fork.png"/>
            </div>
          </div>
          <div class="div_7"><span class="text_2">饮食异常</span>
            <span class="text_2">{{ titleInfo.dietAbnormal }}</span>

          </div>
        </div>
        <div class="div_8">
          <div class="div_9">
            <div class="i_2">
              <img class="svg_2" src="../assets/img/playdog.png"/>
            </div>
          </div>
          <div class="div_10"><span class="text_4">行为异常</span>
            <span class="text_4">{{ titleInfo.behaviorAbnormal }}</span>
          </div>
        </div>
        <div class="div_11">
          <div class="div_12">
            <div class="i_3">
              <img class="svg_3" src="../assets/img/record.png"/>
            </div>
          </div>
          <div class="div_13">
            <span class="text_6">待体检宠物</span>
            <span class="text_6">{{ titleInfo.count }}</span>
          </div>
        </div>
      </div>

      <!-- 中间部分 -->
      <div class="div_14">
        <!-- 宠物信息表 -->
        <div class="div_15">
          <div class="div_16">
            <div className="div_17">
              <img :src=" petInfo[selected].coverImg "
                   style="height: 68px;width: 68px;object-fit: cover;border-radius: 40px;">
            </div>
            <div class="div_18">{{ petInfo[selected].petName }} {{ petInfo[selected].age }}岁</div>
          </div>
          <div class="div_19">
            <span class="text_11">疫苗接种情况 | {{ chosePetTotalInfo.vaccinationRecordList.length }}</span>
            <div class="div_20">
              疫苗接种内容{{ chosePetTotalInfo.vaccinationRecordList.map(item => item.vaccinationName).toString() }}
            </div>
          </div>
        </div>

        <!-- 健康监测图表 -->
        <div class="div_24">
          <div class="div_25">
            <span class="text_18">健康指标监测</span>
            <div class="div_26"><span class="text_19">近7天</span></div>
          </div>
          <div class="div_27">
            <div class="div_28" ref="chart">

            </div>
          </div>
        </div>
      </div>

      <!-- 异常行为记录 -->
      <div class="div_29">
        <div class="div_30">
          <span class="text_22">异常行为记录</span>
          <div class="div_31">
            <div class="div_32">
              <el-input v-model="input" style="width: 240px" placeholder="请输入异常记录"/>
              <el-button type="primary" @click="dialogVisible=true">添加记录</el-button>
            </div>
          </div>
        </div>
        <div class="div_33">
          <div class="table">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="name" label="宠物名"/>
              <el-table-column prop="temperature" label="体温"/>
              <el-table-column prop="anomalyType" label="异常类型"/>
              <el-table-column prop="anomaly" label="具体表现"/>
              <el-table-column prop="handle" label="处理意见"/>
              <el-table-column prop="docName" label="医生姓名"/>
              <el-table-column prop="createTime" label="日期"/>
              <el-table-column fixed="right" label="操作" min-width="120">
                <template v-slot="scope">
                  <el-button link type="primary" @click="handleDeleteClick(scope.row)">删除</el-button>
                  <el-button link type="primary" @click="handleEditClick(scope.row)">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!--          编辑宠物信息-->
          <el-dialog
              v-model="isEdit"
              title="编辑宠物信息"
              align-center
          >
            <el-form :model="editValue" label-width="auto" style="max-width: 600px">
              <el-form-item label="宠物名">
                <el-input v-model="editValue.name"/>
              </el-form-item>
              <el-form-item label="体温">
                <el-input v-model="editValue.temperature"/>
              </el-form-item>
              <el-form-item label="异常类型">
                <el-select v-model="editValue.type2">
                  <el-option
                      v-for="type in anomalyType"
                      :key="type.value"
                      :label="type.label"
                      :value="type.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="具体表现">
                <el-input v-model="editValue.anomaly"/>
              </el-form-item>
              <el-form-item label="处理意见">
                <el-input v-model="editValue.handle"/>
              </el-form-item>
              <el-form-item label="医生姓名">
                <el-input v-model="editValue.docName"/>
              </el-form-item>
            </el-form>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="cancelEdit()">取消</el-button>
                <el-button type="primary" @click="submitEdit()">
                  提交
                </el-button>
              </div>
            </template>
          </el-dialog>
          <!--添加异常记录弹出窗-->
          <el-dialog
              v-if="dialogVisible"
              v-model="dialogVisible"
              title="添加宠物异常信息"
              align-center
          >
            <el-form :model="form2 " label-width="auto" style="max-width: 600px">
              <el-form-item label="选择宠物">
                <el-select v-model="form2.petId" placeholder="请选择宠物">
                  <el-option
                      v-for="item in petInfo"
                      :key="item.petId"
                      :label="item.petName"
                      :value="item.petId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="体温">
                <el-input v-model="form2.temperature"/>
              </el-form-item>
              <el-form-item label="选择异常">
                <el-select v-model="form2.anomalyType" placeholder="请选择异常">
                  <el-option
                      v-for="type in anomalyType"
                      :key="type.value"
                      :label="type.label"
                      :value="type.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="具体表现">
                <el-input v-model="form2.anomaly"/>
              </el-form-item>
              <el-form-item label="处理意见">
                <el-input v-model="form2.handle"/>
              </el-form-item>
              <el-form-item label="医生姓名">
                <el-input v-model="form2.docName"/>
              </el-form-item>
              <el-form-item label="创建时间">
                <el-date-picker
                    v-model="form2.createTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    align="right"
                    :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>
            </el-form>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialogVisible=false">取消</el-button>
                <el-button type="primary" @click="addPetAbormal">
                  确认
                </el-button>
              </div>
            </template>
          </el-dialog>
        </div>

        <!-- 医生联系方式，可添加 -->
        <div class="div_34">
          <el-button type="text" @click="table = true">
            <img class="svg_2" src="../assets/img/phone.png"/> 医生联系方式
          </el-button>
          <el-button type="text" @click="dialog = true">添加医生</el-button>

          <el-drawer v-model="table" title="医生列表" direction="rtl" size="40%">
            <el-table :data="doctorList">
              <el-table-column property="hospital" label="医院"/>
              <el-table-column property="name" label="医生"/>
              <el-table-column property="phone" label="手机号"/>
            </el-table>
          </el-drawer>
          <!--抽屉-->
          <el-drawer v-model="dialog" title="添加医生" direction="ltr" class="demo-drawer">
            <div class="demo-drawer__content">
              <el-form :model="doctorInfo">
                <el-form-item label="医生姓名">
                  <el-input v-model="doctorInfo.name"/>
                </el-form-item>
                <el-form-item label="医生手机号">
                  <el-input v-model="doctorInfo.phone"/>
                </el-form-item>
                <el-form-item label="医院">
                  <el-input v-model="doctorInfo.hospital"/>
                </el-form-item>
              </el-form>
              <div class="demo-drawer__footer">
                <el-button @click="cancelForm">取消</el-button>
                <el-button type="primary" @click="onSubmit">提交</el-button>
              </div>
            </div>
          </el-drawer>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
import {
  addDoctor,
  checkPetAbnormalInfo,
  getDocList,
  getPetListAPI,
  getTotalInfoById,
  updatePetAbormal, addPetAbormal
} from "@/api/petApi";
import {parseTime2, parseTime3} from "@/utils/timeUtil";
import * as echarts from "echarts";

export default {
  props: ["style"],
  data() {
    return {
      anomalyType: [
        {value: '1', label: '体温异常'},
        {value: '2', label: '饮食异常'},
        {value: '3', label: '行为异常'},
        {value: '4', label: '其他异常'}
        // 可以根据需要添加更多异常类型
      ],
      isInit: true,
      isEdit: false,
      petInfo: [
        {
          petId: 1,
          petName: "小白",
          specis: "狗",
          age: 3,
          weight: 15,
          gender: 1,
          dateOfBirth: 1621440000000,
          size: "中型",
          hairLength: "短毛",
          color: "白色",
          vaccinationReconds: 0,
          vaccinationRecond: '',
          dewormingRecords: 0,
          dewormingRecord: '',
          medicalHistory: "无",
          allergyHistory: "无",
          personalityTraits: "活泼粘人",
          dietaryHabits: "喜欢鸡肉和狗粮",
          activityPreferences: "喜欢跑步和玩球",
          sleepHabits: "喜欢睡觉",
          sportHabits: "习惯运动",
          coverImg: "http://localhost:8090/image/大狗 (2).png",
          mainImg: "http://localhost:8090/imag1312312313e/大狗 (2).png",
          imgs: "http://localhost:8090/image/大狗 (3).png;http://localhost:8090/image/大狗 (4).png;http://localhost:8090/image/大狗 (5).png"
        }
      ],
      dialogVisible: false,
      selected: 0,
      tableData: [
        {
          id: 0,
          createTime: "2016-05-03",
          name: "Tom",
          temperature: "",
          anomaly: "California",
          anomalyType: "Los Angeles",
          handle: "No. 189, Grove St, Los Angeles",
          docName: "CA 90036",
        },
      ],
      // 折线图
      option: {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['体温', '体重', '心率', '身高', '血压']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '体温',
            type: 'line',
            stack: 'Total',
            data: [20, 22, 33, 45, 26, 38, 30]
          },
          {
            name: '体重',
            type: 'line',
            stack: 'Total',
            data: [20, 22, 33, 45, 26, 38, 30]
          },
          {
            name: '心率',
            type: 'line',
            stack: 'Total',
            data: [20, 22, 33, 45, 26, 38, 30]
          },
          {
            name: '身高',
            type: 'line',
            stack: 'Total',
            data: [20, 22, 33, 45, 26, 38, 30]
          },
          {
            name: '血压',
            type: 'line',
            stack: 'Total',
            data: [10, 22, 33, 45, 26, 38, 30]
          }
        ]
      },
      petExaminationRecord: [],
      doctorInfo: {
        id: null,
        name: null,
        phone: null,
        hospital: null,
        isDelete: null
      },
      form2: {
        userId: null,
        petId: null,
        temperature: "",
        anomaly: "",
        anomalyType: "",
        handle: "",
        docName: "",
        createTime: ''
      },
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      titleInfo: {
        temperatureAbnormal: 0,
        dietAbnormal: 0,
        behaviorAbnormal: 0,
        count: 0
      },
      anomalyTypeMap: {
        1: "体温异常",
        2: "饮食异常",
        3: "行为异常",
        4: "异常"
      },
      gridData: [
        {
          hospital: "仁爱医院",
          name: "张三",
          phone: "19999999991",
        },
        {
          hospital: "仁爱医院2",
          name: "李四",
          phone: "19999999992",
        },
        {
          hospital: "仁爱医院3",
          name: "王五",
          phone: "19999999993",
        },
        {
          hospital: "仁爱医院4",
          name: "赵六",
          phone: "19999999994",
        },
      ],
      dialog: false,
      table: false,
      loading: false,
      timer: null,
      chosePetId: 0,
      editValue: {},
      chosePetTotalInfo: {
        id: 1,
        anomalyRecordList: [],
        petsActivitiesList: [],
        petDrinkList: [],
        petImgs: [],
        vaccinationRecordList: [],
        examinationRecordList: [],
        dailyData: [],
        vaccination: [],
      },
      doctorList: []
    };
  },
  methods: {
    pickerOptions: {
      shortcuts: [{
        text: '今天',
        onClick(picker) {
          picker.$emit('pick', new Date());
        }
      }]
    },
    addPetAbormal() {
      console.log(this.form2.createTime)
      // 调用后端接口添加记录
      this.form2.userId = this.petInfo[0].userId
      if (this.form2.createTime === '') {
        this.form2.createTime = new Date()
      }
      addPetAbormal(this.form2).then(res => {
        // 处理成功响应
        this.$message.success('记录添加成功');
        window.location.reload()
      }).catch(err => {
        // 处理错误响应
        this.$message.error('记录添加失败');
      })
    },
    onSubmit() {
      addDoctor(this.doctorInfo).then(res => {
        this.getDocList()
        this.dialog = !this.dialog
      })

    },
    handleDeleteClick(value) {
      const data = {id: value.id, isDelete: 1, petId: value.petId}
      this.updateAnomalyRecord(data)

    },
    cancelEdit() {
      this.editValue = {}
      this.isEdit = !this.isEdit
    },
    submitEdit() {
      this.editValue.createTime = new Date()
      this.editValue.anomalyType = this.editValue.type2
      this.updateAnomalyRecord(this.editValue)
      this.isEdit = !this.isEdit
    },
    handleEditClick(value) {
      this.editValue = value
      this.isEdit = !this.isEdit
    },
    updateAnomalyRecord(data) {
      updatePetAbormal(data).then(res => {
        this.queryTotalInfo()
        this.getCheckInfo()
      })
    },
    getCheckInfo() {
      checkPetAbnormalInfo().then(res => {
        this.titleInfo = res.data
      });
    },
    queryTotalInfo() {
      getTotalInfoById(this.chosePetId).then(res => {
        this.chosePetTotalInfo = res.data
        // 初始化 series 数据
        this.option.series[0].data = []
        this.option.series[1].data = []
        this.option.series[2].data = []
        this.option.series[3].data = []
        this.option.series[4].data = []
        this.option.xAxis.data = []
        // examinationRecordList 中包含 weight, heartRate, bloodPressure, height, temperature 字段
        this.chosePetTotalInfo.examinationRecordList.forEach(v => {
          this.option.series[0].data.push(v.temperature)
          this.option.series[1].data.push(v.weight)
          this.option.series[2].data.push(v.heartRate)
          this.option.series[3].data.push(v.height)
          this.option.series[4].data.push(v.bloodPressure)
          this.option.xAxis.data.push(parseTime3(v.createdAt))
        })
        // 更新图表
        this.initChart()
        const anomalyTypeMap = {
          1: "体温异常",
          2: "饮食异常",
          3: "行为异常"
        };


        this.chosePetTotalInfo.anomalyRecordList.forEach(v => {
          v.createTime = parseTime2(v.createTime)
          v.type2 = v.anomalyType
          v.anomalyType = anomalyTypeMap[v.anomalyType] || "异常";
          v.name = this.petInfo[this.selected].petName
        })
        this.tableData = this.chosePetTotalInfo.anomalyRecordList
      })
    },
    initChart() {
      const chart = echarts.init(this.$refs.chart);
      chart.setOption(this.option);
    },
    // 切换宠物时触发
    changeIndex(index) {
      this.selected = index;
      this.chosePetId = this.petInfo[index].petId;
      this.queryTotalInfo();
    }, getPetInfo: function () {
      getPetListAPI().then(res => {
        this.petInfo = res.data.map(item => {
          const updatedItem = {...item}; //
          updatedItem.personalityTrait = updatedItem.personalityTraits.split(';');
          if (updatedItem.imgs && updatedItem.imgs.includes(';')) {
            updatedItem.phtos = updatedItem.imgs.split(';');
          }
          updatedItem.dateOfBirth = parseTime2(updatedItem.dateOfBirth);
          return updatedItem;
        });
        if (this.isInit) {
          this.changeIndex(0)
          this.isInit = false
        }
      });
    },
    query(queryDate) {

    },
    getDocList() {
      getDocList().then(res => {
        this.doctorList = res.data
        console.log(this.doctorList)
      })
    },
    onClick() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.dialog = false;
      }, 400);
    },
    handleClose(done) {
      if (this.loading) {
        return;
      }
      MessageBox.confirm("Do you want to submit?")
          .then(() => {
            this.loading = true;
            this.timer = setTimeout(() => {
              done();
              setTimeout(() => {
                this.loading = false;
              }, 400);
            }, 2000);
          })
          .catch(() => {
          });
    },
    cancelForm() {
      this.doctorInfo = {
        id: null,
        name: null,
        phone: null,
        hospital: null,
        isDelete: null
      }
      this.dialog = !this.dialog
    },
  },
  mounted() {
    this.getDocList();
    this.getCheckInfo()
    this.getPetInfo()
    this.initChart();
  }
}
</script>


<style>
* {
  box-sizing: border-box;
}

</style>
<style scoped>
/* BODY-2607026 */
.body_2607026 {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: #f9fafb;
  min-height: 100%;
}

/* DIV */
.div {
  width: 1280px;
  height: 1040px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 32px;
  padding-right: 16px;
  padding-bottom: 32px;
  padding-left: 16px;
  gap: 10px;
  position: relative;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
}

/* DIV */
.div_1 {
  position: absolute;
  width: 1248px;
  height: 96px;
  top: 32px;
  left: 16px;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

/* DIV */
.div_2 {
  width: 294px;
  height: 96px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-top: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
  padding-left: 24px;
  border-radius: 8px;
  background: linear-gradient(0, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(0, #ffffff, #ffffff);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  position: relative;
  margin-left: 0;
  margin-top: 0;
}

/* DIV */
.div_3 {
  width: 48px;
  height: 48px;
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: #fee2e2;
}

/* I */
.i {
  position: absolute;
  width: 12.5px;
  height: 28px;
  top: 10px;
  left: 18px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* SVG */
.svg {
  width: 12px;
  height: 20px;
  position: relative;
  margin-top: 4px;
  margin-left: auto;
  margin-right: auto;
}

/* DIV */
.div_4 {
  position: absolute;
  width: 76px;
  height: 48px;
  top: 24px;
  left: 88px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* P */
.text {
  width: 100%;
  height: 20px;
  font-size: 14px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 20px;
  color: #6b7280;
  white-space: pre;
  padding-top: 0;
  padding-right: 20px;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}


/* DIV */
.div_5 {
  width: 294px;
  height: 96px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-top: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
  padding-left: 24px;
  border-radius: 8px;
  background: linear-gradient(0, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(0, #ffffff, #ffffff);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  position: relative;
  margin-left: 24px;
  margin-top: 0;
}

/* DIV */
.div_6 {
  width: 48px;
  height: 48px;
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: #ffedd5;
}

/* I */
.i_1 {
  position: absolute;
  width: 17.5px;
  height: 28px;
  top: 10px;
  left: 15px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* SVG */
.svg_1 {
  width: 18px;
  height: 20px;
  position: relative;
  margin-top: 4px;
  margin-left: auto;
  margin-right: auto;
}

/* DIV */
.div_7 {
  position: absolute;
  width: 76px;
  height: 48px;
  top: 24px;
  left: 88px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* P */
.text_2 {
  width: 100%;
  height: 20px;
  font-size: 14px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 20px;
  color: #6b7280;
  white-space: pre;
  padding-top: 0;
  padding-right: 20px;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}


/* DIV */
.div_8 {
  width: 294px;
  height: 96px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-top: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
  padding-left: 24px;
  border-radius: 8px;
  background: linear-gradient(0, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(0, #ffffff, #ffffff);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  position: relative;
  margin-left: 24px;
  margin-top: 0;
}

/* DIV */
.div_9 {
  width: 48px;
  height: 48px;
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: #fef9c3;
}

/* I */
.i_2 {
  position: absolute;
  width: 17.5px;
  height: 28px;
  top: 10px;
  left: 15px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* SVG */
.svg_2 {
  width: 17px;
  height: 20px;
  position: relative;
  margin-top: 4px;
  margin-left: auto;
  margin-right: auto;
}

/* DIV */
.div_10 {
  position: absolute;
  width: 76px;
  height: 48px;
  top: 24px;
  left: 88px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* P */
.text_4 {
  width: 100%;
  height: 20px;
  font-size: 14px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 20px;
  color: #6b7280;
  white-space: pre;
  padding-top: 0;
  padding-right: 20px;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}


/* DIV */
.div_11 {
  width: 294px;
  height: 96px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-top: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
  padding-left: 24px;
  border-radius: 8px;
  background: linear-gradient(0, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(0, #ffffff, #ffffff);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  position: relative;
  margin-left: 24px;
  margin-top: 0;
}

/* DIV */
.div_12 {
  width: 48px;
  height: 48px;
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: #dbeafe;
}

/* I */
.i_3 {
  position: absolute;
  width: 17.5px;
  height: 28px;
  top: 10px;
  left: 15px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* SVG */
.svg_3 {
  width: 18px;
  height: 20px;
  position: relative;
  margin-top: 4px;
  margin-left: auto;
  margin-right: auto;
}

/* DIV */
.div_13 {
  position: absolute;
  width: 76px;
  height: 48px;
  top: 24px;
  left: 88px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* P */
.text_6 {
  width: 100%;
  height: 20px;
  font-size: 14px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 20px;
  color: #6b7280;
  white-space: pre;
  padding-top: 0;
  padding-right: 6px;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
  margin-top: 0;
  margin-left: 0;
}


/* DIV */
.div_14 {
  position: absolute;
  width: 1248px;
  height: 420px;
  top: 160px;
  left: 16px;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

/* DIV */
.div_15 {
  width: 400px;
  height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
  padding-left: 24px;
  gap: 10px;
  border-radius: 8px;
  background: linear-gradient(0, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(0, #ffffff, #ffffff);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  position: relative;
  margin-left: 0;
  margin-top: 0;
}

/* DIV */
.div_16 {
  width: 352px;
  height: 96px;
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
}

/* DIV */
.div_17 {
  position: absolute;
  width: 96px;
  height: 96px;
  top: 0;
  left: 0;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


/* DIV */
.div_18 {
  position: absolute;
  width: 141px;
  height: 76px;
  top: 10px;
  left: 112px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


/* DIV */
.div_19 {
  width: 352px;
  height: 129px;
  position: absolute;
  top: 144px;
  left: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 15px;
  gap: 10px;
  flex-shrink: 0;
  border-width: 1px 0px 0px 0px;
  border-style: solid;
  border-color: #e5e7eb;
}

/* H4 */
.text_11 {
  width: 352px;
  height: 24px;
  position: absolute;
  top: 16px;
  left: 0;
  flex-shrink: 0;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 500;
  line-height: 24px;
  color: #000000;
  white-space: pre;
  padding-top: 0;
  padding-right: 256px;
  padding-bottom: 0;
  padding-left: 0;
}

/* DIV */
.div_20 {
  position: absolute;
  width: 352px;
  height: 76px;
  top: 52px;
  left: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


/* DIV */
.div_24 {
  width: 824px;
  height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
  padding-left: 24px;
  gap: 10px;
  border-radius: 8px;
  background: linear-gradient(0, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(0, #ffffff, #ffffff);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  position: relative;
  margin-left: 24px;
  margin-top: 0;
}

/* DIV */
.div_25 {
  width: 776px;
  height: 28px;
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

/* H3 */
.text_18 {
  width: 108px;
  height: 28px;
  position: absolute;
  top: 0;
  left: 0;
  flex-shrink: 0;
  font-size: 18px;
  font-family: Roboto;
  font-weight: 600;
  line-height: 28px;
  color: #000000;
  white-space: pre;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

/* DIV */
.div_26 {
  width: 210px;
  height: 28px;
  position: absolute;
  top: 0;
  left: 566px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
}

/* BUTTON */
.text_19 {
  width: 60px;
  height: 28px;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 4px;
  padding-right: 12px;
  padding-bottom: 4px;
  padding-left: 12px;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 4px;
  background-color: #f3f4f6;
  text-align: center;
  font-size: 14px;
  font-family: Roboto;
  font-weight: 400;
  line-height: 20px;
  color: #4b5563;
  white-space: pre;
}


/* DIV */
.div_27 {
  position: absolute;
  width: 776px;
  height: 320px;
  top: 76px;
  left: 24px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* DIV */
.div_28 {
  position: relative;
  width: 100%;
  height: 320px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0;
  margin-left: 0;
}


/* DIV */
.div_29 {
  width: 1248px;
  height: 324px;
  position: absolute;
  top: 612px;
  left: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
  padding-left: 24px;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 8px;
  background: linear-gradient(0, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(0, #ffffff, #ffffff);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}

/* DIV */
.div_30 {
  width: 1200px;
  height: 38px;
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

/* H3 */
.text_22 {
  width: 108px;
  height: 28px;
  position: absolute;
  top: 5px;
  left: 0;
  flex-shrink: 0;
  font-size: 18px;
  font-family: Roboto;
  font-weight: 600;
  line-height: 28px;
  color: #000000;
  white-space: pre;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

/* DIV */
.div_31 {
  width: 360px;
  height: 38px;
  position: absolute;
  top: 0;
  left: 840px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
}


/* DIV */
.div_32 {
  position: absolute;
  width: 236px;
  height: 38px;
  top: 0;
  left: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}


/* DIV */
.div_33 {
  position: absolute;
  width: 1200px;
  height: 214px;
  top: 86px;
  left: 24px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* TABLE */
.table {
  position: relative;
  width: 100%;
  height: 214px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0;
  margin-left: 0;
}


/* DIV */
.div_34 {
  width: 1248px;
  height: 40px;
  position: absolute;
  top: 968px;
  left: 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.pet_cover_imgs {
  object-fit: cover;
  height: 45px;
  width: 45px;
  border-radius: 20px;
  border: #a7b1bb solid 2px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 90ms ease;
}

.pet_cover_imgs:hover {
  cursor: pointer;
  transform: scale(1.1);
  transition: height 300ms ease, transform 300ms ease; /* 过渡动画 */

}

.pet_cover_imgs:hover {
  transform: translateY(0);
}

.pet_cover_imgs:not(:hover) {
  transform: translateY(-25px);
}

.coverImg {
  overflow: hidden; /* 隐藏超出部分 */
}


</style>
